<template>
  <el-form-item label="ID">
    <el-input v-model="selectedOptions.name" disabled />
  </el-form-item>
  <el-form-item label="name">
    <el-input v-model="selectedWidget.name" disabled />
  </el-form-item>
  <el-form-item label="对齐方式">
    <!-- <el-input-number v-model="selectedOptions.alignment" :min="0" /> -->

    <el-select v-model="selectedOptions.alignment" placeholder="Select">
      <el-option
        v-for="item in alignmentOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="排列方向">
    <!-- <el-input-number v-model="selectedOptions.direction" :min="0" /> -->
    <el-select v-model="selectedOptions.direction" placeholder="Select">
      <el-option
        v-for="item in orientationOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="给space-items的类名前缀">
    <el-input-number v-model="selectedOptions.prefixCls" :min="0" />
  </el-form-item>
  <el-form-item label="间隔符">
    <el-input-number v-model="selectedOptions.spacer" :min="0" />
  </el-form-item>
  <el-form-item label="间隔大小">
    <el-input v-model="selectedOptions.size" />
  </el-form-item>
  <el-form-item label="是否自动折行">
    <el-input v-model="selectedOptions.wrap" />
  </el-form-item>
  <el-form-item label="子元素是否填充父容器">
    <el-input v-model="selectedOptions.fill" />
  </el-form-item>
  <el-form-item label="填充父容器的比例">
    <el-input-number v-model="selectedOptions.fillRatio" :min="0" />
  </el-form-item>
</template>

<script setup>
defineOptions({
  name: "colAttribute",
  inheritAttrs: false,
});
let $props = defineProps({
  selectedWidget: {
    type: Object,
    required: true,
  },
  selectedOptions: {
    type: Object,
    required: true,
  },
});

let alignmentOptions = [
  {
    value: "normal",
    label: "normal",
  },
  {
    value: "stretch",
    label: "stretch",
  },
  {
    value: "center",
    label: "center",
  },
  {
    value: "start",
    label: "start",
  },
  {
    value: "end",
    label: "end",
  },
  {
    value: "flex-start",
    label: "flex-start",
  },
  {
    value: "flex-end",
    label: "flex-end",
  },
  {
    value: "self-start",
    label: "self-start",
  },
  {
    value: "self-end",
    label: "self-end",
  },
  {
    value: "baseline",
    label: "baseline",
  },
  {
    value: "first baseline",
    label: "first baseline",
  },
  {
    value: "last baseline",
    label: "last baseline",
  },
  {
    value: "safe center",
    label: "safe center",
  },
  {
    value: "unsafe center",
    label: "unsafe center",
  },
  {
    value: "inherit",
    label: "inherit",
  },
  {
    value: "initial",
    label: "initial",
  },
  {
    value: "revert",
    label: "revert",
  },
  {
    value: "revert-layer",
    label: "revert-layer",
  },
  {
    value: "unset",
    label: "unset",
  },
];
let orientationOptions = [
  {
    value: "vertical",
    label: "vertical",
  },
  {
    value: "horizontal",
    label: "horizontal",
  }
]
</script>

<style lang="scss" scoped></style>
